<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
</head>
<style type="text/css">
    .layui-table-cell {
        height: 100px;
        /*line-height: 28px;*/
        padding: 0 15px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }

    .layui-table img {
        max-width: 100px;
        max-height: 100px;
        margin-top: 10px;
    }

    .layui-form-item {
        margin-bottom: 15px;
        clear: both;
        *zoom: 1;
        margin-left: -80px;
    }

    .layui-form {
        margin-top: 35px;
    }
</style>
<body>
<form name="form" class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商城专区</label>
        <div class="layui-input-inline">
            <input type="text" name="proArea" id="pro-area" class="layui-input"
                   style="position:absolute;z-index:2;width:80%;" lay-verify="required" value=""
                   onkeyup="searchAreas()" autocomplete="off">
            <select name="modules" id="search-zhuanqu" lay-verify="required" lay-filter="search-zhuanqu" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" name="proName" id="proName" class="layui-input" style="position:absolute;z-index:2;width:80%;" lay-verify="required" value="" onkeyup="searchProductNames()">
            <select name="proname" id="productname" lay-verify="required" lay-filter="search-productname" lay-search="">

            </select>
        </div>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="queryGuiGe">查看规格</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="bar-upstate">
    <div class="layui-form-item" pane="">
        <div class="layui-input-block">
            <input type="checkbox" name="productUpState" lay-skin="primary" title="上架" checked="">
            <input type="checkbox" name="productUpState" lay-skin="primary" title="下架">
        </div>
    </div>
</script>
<script th:src="@{layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<!--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->
<script th:inline="none">
    var activeSign ='0';
    var productName = '传奇天露';
    searchArea();
    layui.use('form', function () {
        var form = layui.form;
        form.on('select(search-zhuanqu)', function (data) {
            var proArea = data.value;
            activeSign = proArea;
            var a=parseInt(activeSign);
            switch (a) {
                case 0:activeSign=4;;break;
                case 1:activeSign=3;break;
                case 2:activeSign=5;break;
                case 3:activeSign=7;break;
            }
            $('#pro-area').val(data.elem[data.elem.selectedIndex].text);
            layui.use('table', function () {
                var table = layui.table;
                table.reload('test', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        activeSign: activeSign
                    }
                });
            })
        });

        form.render();

    });




  function  searchProductNames(){
        productName=$("input[name='proName']").val();
      layui.use('table', function () {
          var table = layui.table;
          table.reload('test', {
              page: {
                  curr: 1
              }
              , where: {
                  productName:productName
              }
          });

      })
  }


    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/getProductListData'
            , cellMinWidth: 80
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , totalRow: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'productId', title: '商品ID'}
                , {field: 'productName', title: '商品名称'}
                , {field: 'classifyName', title: '商品类别'}
                , {field: 'proImg', title: '商品图片', templet: '<div><img src="{{d.proImg}}" ></div>'}
                , {field: 'productUnit', title: '商品单位'}
                , {field: 'activeSignName', title: '活动专区'}
                , {field: 'productUpState', title: '上架状态', templet: '<div>{{d.productUpState=="Y"?"已上架":"未上架"}}</div>'}
                , {field: 'uptime', title: '上架时间', templet: '<div>{{ Format(d.uptime,"yyyy-MM-dd hh:mm:ss")}}</div>'}
                , {field: 'supplier', title: '供货商'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true


        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            var productIds = data['productId'];
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    delProduct(productIds);
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var productId = data['productId'];
                WinOpenAdd(productId);
            } else if (obj.event === 'queryGuiGe') {
                var productId = data['productId'];
                window.location.href = '/openGuiGeDetails?productId=' + productId;
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });

    });

    var body;

    function WinOpenAdd(productId) {
        layer.open({
            type: 2
            , title: '编辑商品'
            , content: '/editorProduct?productIds=' + productId
            , area: ['620px', '620px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                body = layer.getChildFrame('body', index); //得到iframe页的body内容
                updateProductData();//保存修改的商品数据
            }
        });
    }

    function updateProductData() {
        var productId = body.find('#productId').val();
        var productName = body.find('#productName').val();
        var classId = body.find('#classId').val();
        var productUnit = body.find('#productUnit').val();
        var activeSign = body.find('#activeSign').val();
        var productUpState = body.find('#productUpState').val();
        var uptime = body.find('#uptime').val();
        var supplier = body.find('#supplier').val();
        var productshortnamer = body.find('#productshortname').val();
        var productDesc = body.find('#productDesc').val();
        var sort = body.find('#sort').val();
        $.ajax({
            async: false,
            type: 'post',
            url: '/updateProductData',
            data: {
                productId: productId,
                productName: productName,
                classId: classId,
                productUnit: productUnit,
                activeSign: activeSign,
                productUpState: productUpState,
                uptime: uptime,
                supplier: supplier,
                productshortnamer: productshortnamer,
                productDesc: productDesc,
                sort: sort
            },
            success: function (res) {
                if (res.msg == '1') {
                    layer.alert("修改成功！");
                } else {
                    layer.alert("修改失败！");
                }
            }
        })
    }

    //删除商品
    function delProduct(productId) {
        $.ajax({
            url: '/delProductData?productIds=' + productId,
            success: function (res) {
                if (res.msg == '1') {
                    layer.alert("删除成功！");
                    //重载
                    table.reload('test', {
                        url: '/getProductListData'
                        //,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                } else {
                    layer.alert("删除失败！");
                }
            }
        })
    }


    function searchArea() {
        var str = "";
        var area = ['零售专区', '体验专区', '兑换专区', '活动专区'];
        for (var i = 0; i < area.length; i++) {
            str = str + "<option value='" + i + "'>" + area[i] + "</option>";
        }
        $('#search-zhuanqu').append(str);
    }



    function Format(datetime, fmt) {
        if (parseInt(datetime) == datetime) {
            if (datetime.length == 10) {
                datetime = parseInt(datetime) * 1000;
            } else if (datetime.length == 13) {
                datetime = parseInt(datetime);
            }
        }
        datetime = new Date(datetime);
        var o = {
            "M+": datetime.getMonth() + 1,                 //月份
            "d+": datetime.getDate(),                    //日
            "h+": datetime.getHours(),                   //小时
            "m+": datetime.getMinutes(),                 //分
            "s+": datetime.getSeconds(),                 //秒
            "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
            "S": datetime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

</script>


</body>

</html>